/* eslint-disable react/prop-types */
import { Button, Flex, Form } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryMemberInfoEdit, querySelectWindControlLevel } from "@/api/member"
import { IModalContent, IWindControlLevelNameRes } from "@/api/member/types"
import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"
export interface IWindControlAfter {
	remark: string
	windControlId: string
	windControlName: string
}

export const RiskControlLevelModal: React.FC<IModalContent> = ({ handleCancel, userInfo, filterInfo, handleGetUserInfo }) => {
	const { formatMessage } = useLocale()
	const [selectWindControlLevel, setSelectWindControlLevel] = useState<IWindControlLevelNameRes[]>([])
	const [form] = Form.useForm()
	const { loading } = useApi()

	const handleQuerySelectWindControlLevel = useCallback(async () => {
		const bodyRiskControlLevelRes = {
			merchantId: filterInfo.merchantId,
			windControlType: 1
		}
		const [err, riskControlLevelRes] = await querySelectWindControlLevel({ ...bodyRiskControlLevelRes })
		if (err) {
			Toast.error(err.msg)
		}
		if (!err) setSelectWindControlLevel(riskControlLevelRes)
	}, [filterInfo])

	const submit = useCallback(
		async (value: IWindControlAfter) => {
			const name = selectWindControlLevel
				? selectWindControlLevel.filter(item => item.id === value.windControlId)[0]?.windControlLevelName
				: ""
			const body = {
				windControlAfter: {
					remark: value.remark,
					windControlId: value.windControlId,
					windControlName: name
				},
				merchantId: filterInfo.merchantId,
				userId: filterInfo.userId,
				userName: filterInfo.username
			}
			const [err] = await queryMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleGetUserInfo?.()
			handleCancel()
			form.resetFields()
		},
		[filterInfo, selectWindControlLevel]
	)
	useEffect(() => {
		handleQuerySelectWindControlLevel()
	}, [filterInfo])

	useEffect(() => {
		if (userInfo) {
			form.setFieldsValue({
				windControlId: userInfo.windControlId === 0 ? undefined : userInfo.windControlId
			})
		}
	}, [userInfo])

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form
					style={{ width: "100%" }}
					form={form}
					onFinish={submit}
					initialValues={{
						windControlId: "",
						remark: ""
					}}
				>
					<Flex vertical gap={10}>
						<SFormItem
							rules={[{ required: true, message: formatMessage({ id: "common.please_enter" }) }]}
							name="windControlId"
							label={`${formatMessage({ id: "member.button_permissions.riskControlLevel" })}:`}
						>
							<StyleSelect
								allowClear
								options={
									selectWindControlLevel.map(item => ({
										value: item.id,
										label: item.windControlLevelName
									})) ?? []
								}
								placeholder={formatMessage({ id: "tips.pleaseSelect" })}
								style={{ width: 200 }}
							/>
						</SFormItem>

						<CustomTextArea
							placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
							name="remark"
							label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
						/>

						<Flex justify="center" wrap="wrap" gap={10}>
							<Button
								key="back"
								onClick={() => {
									handleCancel()
									form.resetFields()
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button htmlType="submit" type="primary" loading={loading}>
								{formatMessage({ id: "common.sure" })}
							</Button>
						</Flex>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
